<template>
  <div class='help first-box'>
    <div class="head">
      <p class="title"><span class="logo"></span><span>基本信息</span></p>
    </div>
    <Head class="heightauto" :data="headData"></Head>
    <GreyLine></GreyLine>

    <MyMap @locationInfo="getMyLocation"></MyMap>

    <GreyLine></GreyLine>
    <div class="head">
      <p class="title"><span class="logo"></span><span>个人信息</span></p>
    </div>
    <div class="foot">
      <p><span>姓名：</span><input type="text" v-model="userInfo.realName" placeholder="请输入姓名"></p>
      <p><span>手机号：</span><input type="number" v-model="userInfo.phone" placeholder="请输入手机号" maxlength="11"></p>
    </div>
    <Btn class="margin30" :buttonData="buttonData"></Btn>
  </div>
</template>
<script>
import Head from '../../members/center/center'
import GreyLine from '../../common/line.vue'
import MyMap from './map'
import Btn from '../../common/button.vue'
export default {
  components: {Head,GreyLine,MyMap,Btn},
  name: "",
  data() {
    return {
      headData:[
        {
          img:require('../../../assets/img/more/help/1.png'),
          label:"24小时救援",
          value:"",
          btn:{
            label:"我要救援",
            phone:true,
          }
        },{
          img:require('../../../assets/img/more/help/2.png'),
          label:"交警报案",
          value:"122",
          btn:{
            label:"我要报案",
            phone:true,
          }
        }
      ],

      userInfo:{
        realName:"asdf",
        phone:"18771142899",
        longitude:"",
        latitude:"",
        address:"",
      },

      buttonData:[
        {
          label:"发送定位",
          click:this.save
        }
      ]
      
    };
  },
  methods: {
    // 发送定位
    save(){ 
      if(!this.userInfo.realName){
        _g.toMessage({status:1,msg:"姓名不能为空"})
        return
      }else if(!(this.userInfo.phone&&/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(this.userInfo.phone))){
        _g.toMessage({status:1,msg:"手机号格式不正确"})
        return
      }
      // alert(JSON.stringify(this.userInfo))
      // return
      _g.apiPost("rescueApp/addRescueApp.do",this.userInfo).then(res=>{
        _g.toMessage(res)
      })
    },

    getMyLocation(value){
      var goal=(value.slice(1,value.length-1)).split(",")
      this.userInfo.longitude=goal[0]
      this.userInfo.latitude=goal[1]
      this.userInfo.address=goal[2]
    },

    getInfo(){
      _g.apiPost("rescueApp/getStoreTel.do").then(res=>{
        this.$set(this.headData[0],"value",res.data.rescueHotline)
      })
    }
  },
  created(){
    this.getInfo()
  }
  
};
</script>
<style lang="scss" scoped>
.help {

  
  .head{
    padding: 0 15px;

    .title{
      font-size: 16px;
      color: #333;
      padding: 10px 0;
      border-bottom: 1px solid #f2f2f2;

      .logo{
        display: inline-block;
        width: 5px;
        height: 20px;
        border-radius: 5px;
        background-color: #F39519;
        transform: translateY(3px);
        margin-right: 5px;
      }
    }
  }
  
  .heightauto{
    height: auto!important;
  }

  .foot{
    margin: 0 15px;
    

    p{
      padding: 5px 0;
      border-bottom: 1px solid #f2f2f2;
      font-size: 14px;

      span:nth-child(1){
        display: inline-block;
        width: 70px;
      }

      input{
        border: none;
        font-size: 14px;
      }
    }
  }
  .margin30{
    margin: 30px;
  }
}
</style>